import 'package:flutter/material.dart';
import 'package:flutter_switch/flutter_switch.dart';
import 'package:get/get.dart';
import 'package:shudu/page/about_page.dart';
import 'package:shudu/utils/global.dart';
import 'package:shudu/viewmodel/set_viewmodel.dart';
import 'package:shudu/widget/appbar_widget.dart';

class SetPage extends StatelessWidget {
  final SetViewModel _setViewModel = Get.put(SetViewModel());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          AppbarWidget("设置"),
          Container(
            margin: const EdgeInsets.all(15),
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(8)),
            child: Column(
              children: [
                Obx(() =>
                    _itemWidget("振动", value: _setViewModel.isVibrate.value)),
                Obx(() => _itemWidget("声音",
                    value: _setViewModel.isMusicPlay.value, isMusic: true)),
                _itemWidget("关于我们", clickCallback: () {
                  Get.to(() => AboutPage());
                }),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _itemWidget(String title,
      {bool isMusic = false, bool value = true, VoidCallback? clickCallback}) {
    return InkWell(
      onTap: clickCallback,
      child: Container(
        height: 45,
        padding: const EdgeInsets.symmetric(horizontal: 15),
        alignment: Alignment.centerLeft,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              title,
              style: const TextStyle(
                  color: Colors.black, fontSize: 15),
            ),
            clickCallback == null
                ? FlutterSwitch(
                    toggleSize: 10.0,
                    activeColor: mainColor,
                    inactiveColor: Colors.white,
                    inactiveSwitchBorder: Border.all(
                      color: const Color(0xFFBCC5D4),
                      width: 2.0,
                    ),
                    inactiveToggleColor: const Color(0xFFBCC5D4),
                    value: value,
                    width: 36,
                    height: 20,
                    onToggle: (value) {
                      if (isMusic) {
                        _setViewModel.configMusic(value);
                      } else {
                        _setViewModel.configVibrate(value);
                      }
                    })
                : const Icon(Icons.arrow_right)
          ],
        ),
      ),
    );
  }
}
